/* pages/mine/mine.wxss */
.mine-container {
  width: 100vw;
  height: 100vh;
  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
  background-color: #F8F8F8;
  .mine-info {
    padding: 30rpx;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0 0 40rpx 40rpx;
    background: linear-gradient(90deg, #4A4776, #a0a2d4);
    margin-bottom: 130rpx;
    .row1 {
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .mine-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      text {
        color: #fff;
        font-size: 36rpx;
      }

      .right {
        margin-left: 10rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }
    .row2 {
      margin-top: 60rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 100rpx;
      .row2-item {
        color: #fff;
      }
    }
  }
  .row3 {
    width: 90%;
    margin: 20rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    position: absolute;
    top: 370rpx;
    .row3-image {
      width: 50rpx;
      height: 50rpx;
      padding-left: 40rpx;
    } 
    view {
      font-size: 30rpx;
    }
  }
  .more-server {
    width: 85%;
    margin: 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 40rpx;
    .server-title {
      font-size: 40rpx;
      margin-bottom: 30rpx;
    }
    .server-row {
      display: flex;
      justify-content: start;
      align-items: center;
      .server-item {
        margin-right: 60rpx;
        .server-image {
          width: 50rpx;
          height: 50rpx;
          padding-left: 40rpx;
        }
      }
      
    }
    
  }
}